<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">企业名称:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.comId" style="width: 100%;" size="mini" clearable @change="searchRowsInfo(true)"
                           placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">数据类别:</span>
                <span class="searchInputFont">
                     <el-select v-model="searchInfo.msgType" @change="searchRowsInfo(true)" size="mini"  clearable placeholder="全部">
                         <el-option
                           v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                           </el-option>
                    </el-select>
              </span>
              </div>

            </el-col>
            <el-col :span="6">
              <div class="searchWrap">
                <span class="searchFont">查询时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     v-model="searchInfo.statisDate"
                     style="width: 100%;"
                     align="right"
                     @change="searchRowsInfo(true)"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期"
                     :picker-options="$store.state.pickerOptions0">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="企业名称"
              prop="comName"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="唯一编号"
              prop="entryId"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="信息类别"
              prop="startTime"
            >
              <template slot-scope="scope">
                {{scope.row.msgType == 'MSG_ORDER' ? '订单信息' : scope.row.msgType == 'MSG_ORDER_TRACK' ? '订单轨迹上报' : scope.row.msgType == 'MSG_BICYCLE_SITE' ? '车辆位置上报' : ""}}
              </template>
            </el-table-column>
            <el-table-column
              label="产生时间"
              prop="produceTime"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="接收时间"
              prop="receiveTime"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="时间差(分钟)"
              prop="intervalMinute"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationWrap" >
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.page"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="searchInfo.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        tableHeight: 400,
        searchInfo: {
          "comId": "",
          "bicycleNo": "",
          "statisDate": "",
          "msgType": "",
          page: 1,
          rows: 10,
        },
        options: [
          {
            value: 'MSG_ORDER',
            label: '订单信息'
          }, {
            value: 'MSG_ORDER_TRACK',
            label: '订单轨迹上报'
          }, {
            value: 'MSG_BICYCLE_SITE',
            label: '车辆位置上报'
          }],
        streetData: [],
      }
    },
    components: {},
    created(){
    this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".operationPageWrap").clientHeight - 160
      })
    },

    methods: {
      //获取所有信息
      searchRowsInfo(key){
        if(key){
          this.searchInfo.page = 1;
        }

        this.axios.post(process.env.API_HOST + `/data/getValidDataGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.rows
              this.count = result.total
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo()

      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()


</style>
